<template>
    <div class="pie-chart" >
        <div class="title">
            近期我的项目任务统计概览（55）
        </div>
        <p class="tips">未结束的项目任务</p>
        <div id="pieChart"></div>
    </div>
</template>

<script>
export default {
    name: 'pie-chart',
    data() {
        return {

        }
    },

    mounted() {
        this.setEcharts();
    },
    methods: {
        setEcharts() {
            let myChart = this.$echarts.init(document.getElementById('pieChart'));
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} {b}: {c} ({d}%)"
                },
                backgroundColor:'#ffffff',
                color:['#da1111','#108ee9','#ec3232','#f55555','#fb8c8c','#7cc7ff'],
                legend: {
                    orient: 'horizontal',
                    x: 'left',
                    y: 'bottom',
                    data:['待完成','已完成']
                },
                series: [
                    {
                        name:'近期项目任务占比',
                        type:'pie',
                        selectedMode: 'single',
                        radius: [0, '34%'],

                        label: {
                            normal: {
                                position: 'inner',
                                fontSize: '14',
                                fontWeight: 'bold'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '15',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data:[
                            {value:15, name:'待完成', selected:true},
                            {value:35, name:'已完成'},
                        ]
                    },
                    {
                        name:'访问来源',
                        type:'pie',
                        radius: ['45%', '55%'],
                        
                        data:[
                            {value:5, name:'进行中'},
                            {value:5, name:'未开始'},
                            {value:5, name:'滞后'},
                            {value:35, name:'完成'},
                        ]
                    }
                ]
            };
            myChart.setOption(option)
        }
    },
}
</script>

<style lang="less" scoped>
    .pie-chart {
        color: #444;
        padding: 28px 26px 30px 24px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        .title {
            font-weight: bold;
        }

        .tips {
            font-size: 14px;
            color: #666;
            line-height: 50px;
        }

        #pieChart {
            flex: 1;
        }

    }
</style>

